<template>
  <ele-drawer
    :size="430"
    :inner="inner"
    :append-to-body="true"
    v-model="visible"
    title="限制在抽屉中的消息提示"
  >
    <div>内容内容内容内容内容内容</div>
    <div>内容内容内容内容内容内容</div>
    <div>内容内容内容内容内容内容</div>
    <div>内容内容内容内容内容内容</div>
    <div>内容内容内容内容内容内容</div>
    <div>内容内容内容内容内容内容</div>
    <div style="margin: 16px 0 26px 0">
      <el-button type="primary" class="ele-btn-icon" @click="showMessage">
        显示提示
      </el-button>
    </div>
    <div ref="modalMessageWrapRef" class="ele-message-wrapper"></div>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </ele-drawer>
</template>

<script setup>
import { ref } from "vue";
import { useMessage } from "ele-admin-plus/es";

const props = defineProps({
  theme: Number,
  inner: Boolean,
});

const visible = defineModel({ type: Boolean });

const message = useMessage();

const modalMessageWrapRef = ref();

const showMessage = () => {
  message.success({
    message: "这是一条成功的提示",
    plain: props.theme === 1,
    original: props.theme === 3 ? "plain" : props.theme === 2,
    inner: true,
    showClose: true,
    appendTo: modalMessageWrapRef.value,
  });
};

const save = () => {
  message.info({
    message: "点击了保存",
    plain: true,
    inner: true,
    appendTo: modalMessageWrapRef.value,
  });
};

const handleCancel = () => {
  visible.value = false;
};
</script>
